<template>
    <div class="home">

        <h2>Hello!</h2>
        <!-- 头部数据列表 -->
        <ul class="header">
            <li v-for="(item, index) in headerList" :key="index">
                <div class="img_box">
                    <img :src=item.imgBg alt="" class="bg">
                    <img :src="item.img" alt="" class="img">
                </div>
                <div class="msg">
                    <p class="text">{{ item.text }}</p>
                    <p class="num">{{ item.num }}</p>
                </div>
            </li>
        </ul>

        <!-- echarts数据图 和 待办提醒 -->
        <div class="top2">

            <div class="echarts" ref="myCharts">

            </div>

            <div class="remind">
                <h3>待办提醒</h3>
                <ul>
                    <li v-for="(item, index) in remind" :key="index">
                        <div class="left">
                            <p class="num">{{ item.num }}</p>
                            <p class="text">{{ item.text }}</p>
                        </div>
                        <div class="right">
                            <img src="../../img/home/dot.png" alt="">
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 居民标签和居民指标异常区 -->
        <div class="top3">
            <div class="lable">
                <h3>居民标签</h3>
                <el-row class="lable_item" v-for="(item, index) in peopleLable" :key="index">
                    <p>{{ item.title }}</p>
                    <el-progress :percentage="item.num" :stroke-width="10"></el-progress>
                </el-row>

            </div>
            <div class="index">
                <div class="index_header">
                    <h3>居民指标异常区</h3>
                    <span>全部 <i class="el-icon-arrow-right"></i></span>
                </div>

                <ul>
                    <li class="index_item">
                        <div class="head_img">
                            <img src="../../../public/images/Layout/touxiang.jpg" alt="">
                        </div>
                        <div class="item_user">
                            <span class="user_name">栗电奇</span>
                            <span>26岁</span>
                            <img src="../../img/home/cao.png" alt="">
                        </div>
                        <div class="disease">
                            <img src="../../img/home/error_u1273.png" alt="">
                            血糖过高
                        </div>
                        <div class="btn">
                            <el-button type="primary">查看详情</el-button>
                        </div>

                    </li>
                    <li class="index_item">
                        <div class="head_img">
                            <img src="../../../public/images/Layout/touxiang.jpg" alt="">
                        </div>
                        <div class="item_user">
                            <span class="user_name">栗电奇</span>
                            <span>26岁</span>
                            <img src="../../img/home/cao.png" alt="">
                        </div>
                        <div class="disease">
                            <img src="../../img/home/error_u1273.png" alt="">
                            血糖过高
                        </div>
                        <div class="btn">
                            <el-button type="primary">查看详情</el-button>
                        </div>

                    </li>
                    <li class="index_item">
                        <div class="head_img">
                            <img src="../../../public/images/Layout/touxiang.jpg" alt="">
                        </div>
                        <div class="item_user">
                            <span class="user_name">栗电奇</span>
                            <span>26岁</span>
                            <img src="../../img/home/cao.png" alt="">
                        </div>
                        <div class="disease">
                            <img src="../../img/home/error_u1273.png" alt="">
                            血糖过高
                        </div>
                        <div class="btn">
                            <el-button type="primary">查看详情</el-button>
                        </div>

                    </li>
                    <li class="index_item">
                        <div class="head_img">
                            <img src="../../../public/images/Layout/touxiang.jpg" alt="">
                        </div>
                        <div class="item_user">
                            <span class="user_name">栗电奇</span>
                            <span>26岁</span>
                            <img src="../../img/home/cao.png" alt="">
                        </div>
                        <div class="disease">
                            <img src="../../img/home/error_u1273.png" alt="">
                            血糖过高
                        </div>
                        <div class="btn">
                            <el-button type="primary">查看详情</el-button>
                        </div>

                    </li>
                </ul>
            </div>
        </div>

        <!-- 本周签约概括列表 -->
        <div class="table">
            <h3>本周签约概括</h3>
            <el-table @cell-click="gotoDteail" :data="tableData" stripe style="width: 100%">
                <el-table-column prop="team" label="团队" width="180">
                </el-table-column>
                <el-table-column prop="num1" label="2021-01-04" width="180">
                </el-table-column>
                <el-table-column prop="num2" label="2021-01-05">
                </el-table-column>
                <el-table-column prop="num2" label="2021-01-05">
                </el-table-column>
                <el-table-column prop="num2" label="2021-01-05">
                </el-table-column>
                <el-table-column prop="num2" label="2021-01-05">
                </el-table-column>
                <el-table-column prop="num2" label="2021-01-05">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>


<script>
// 引入 echarts
import echarts from 'echarts'

export default {
    name: 'Home',
    data() {
        return {
            // 头部列表数据
            headerList: [
                { imgBg: require('../../img/home/header-bg1.png'), img: require('../../img/home/header-img1.png'), text: '居民总数量', num: '11,000' },
                { imgBg: require('../../img/home/header-bg2.png'), img: require('../../img/home/header-img2.png'), text: '签约居民数量', num: '56,000' },
                { imgBg: require('../../img/home/header-bg3.png'), img: require('../../img/home/header-img3.png'), text: '待处理服务量', num: '600' },
                { imgBg: require('../../img/home/header-bg4.png'), img: require('../../img/home/header-img4.png'), text: '已完成服务量', num: '8900' },
            ],
            // 本周签约概括列表 数据
            tableData: [{
                team: '2016-05-02',
                num1: '50',
                num2: '1518'
            }, {
                team: '2016-05-04',
                num1: '50',
                num2: '1517'
            }, {
                team: '2016-05-01',
                num1: '50',
                num2: '1519'
            }, {
                team: '2016-05-03',
                num1: '50',
                num2: '1516'
            }, {
                team: '2016-05-03',
                num1: '50',
                num2: '1516'
            }, {
                team: '2016-05-03',
                num1: '50',
                num2: '1516'
            }, {
                team: '2016-05-03',
                num1: '50',
                num2: '1516'
            }],
            // echarts 数据
            charts: '',
            /*    opinion: ["1", "3", "3", "4", "5"],*/
            xdata: ["1/16", "1/17", "1/18", "1/19", "1/20", "1/21", "1/22", "1/23", "1/24", "1/25", "1/26", "1/27", "1/28", "1/29", "1/30", "1/31", "2/1", "2/2", "2/3", "2/4", "2/5", "2/6", "2/7", "2/8", "2/9", "2/10", "2/11", "2/12", "2/13", "2/14", "2/15", "2/16", "2/17", "2/18", "2/19", "2/20", "2/21", "2/22", "2/23", "2/24", "2/25", "2/26", "2/27", "2/28", "2/29", "3/1", "3/2", "3/3", "3/4", "3/5", "3/6", "3/7", "3/8", "3/9", "3/10", "3/11", "3/12", "3/13", "3/14", "3/15", "3/16", "3/17", "3/18", "3/19", "3/20", "3/21", "3/22", "3/23", "3/24", "3/25", "3/26", "3/27", "3/28", "3/29", "3/30", "3/31", "4/1", "4/2", "4/3", "4/4", "4/5", "4/6", "4/7", "4/8", "4/9", "4/10", "4/11", "4/12", "4/13", "4/14", "4/15", "4/16", "4/17", "4/18", "4/19", "4/20", "4/21", "4/22", "4/23", "4/24", "4/25", "4/26", "4/27", "4/28", "4/29", "4/30", "5/1", "5/2", "5/3", "5/4", "5/5"],
            adata: [0, 0, 0, 0, 291, 440, 571, 830, 1287, 1975, 2744, 4515, 5974, 7710, 9689, 11790, 14376, 17203, 20437, 24324, 28018, 31147, 34542, 37109, 40158, 42638, 44653, 58761, 63851, 66491, 68500, 70550, 72436, 74185, 75002, 75891, 76288, 76741, 77150, 77658, 78064, 78497, 78824, 79251, 79824, 80026, 80151, 80270, 80409, 80552, 80651, 80695, 80735, 80754, 80778, 80793, 80813, 80824, 80844, 80860, 80881, 80894, 80928, 80967, 81008, 81054, 81093, 81171, 81218, 81285, 81340, 81394, 81439, 81470, 81518, 81554, 81589, 81620, 81639, 81669, 81708, 81740, 81802, 81865, 81907, 81953, 82052, 82160, 82249, 82295, 82341, 82692, 82719, 82735, 82747, 82758, 82788, 82798, 82804, 82816, 82827, 82830, 82836, 82858, 82862, 82874, 82875, 82877, 82880, 82881, 82883],
            cdata: [0, 0, 0, 0, 0, 9, 17, 25, 41, 56, 80, 106, 132, 170, 213, 259, 304, 361, 425, 490, 563, 636, 722, 811, 908, 1016, 1113, 1259, 1380, 1523, 1665, 1770, 1868, 2004, 2118, 2236, 2345, 2442, 2592, 2663, 2715, 2744, 2788, 2835, 2870, 2912, 2943, 2981, 3012, 3042, 3070, 3097, 3119, 3136, 3158, 3169, 3176, 3189, 3199, 3213, 3226, 3237, 3245, 3248, 3255, 3261, 3270, 3277, 3281, 3287, 3292, 3295, 3300, 3304, 3305, 3312, 3318, 3322, 3326, 3329, 3331, 3331, 3333, 3335, 3336, 3339, 3339, 3341, 3341, 3342, 3342, 4632, 4632, 4632, 4632, 4632, 4632, 4632, 4632, 4632, 4632, 4633, 4633, 4633, 4633, 4633, 4633, 4633, 4633, 4633, 4633],
            bdata: [45, 0, 0, 0, 0, 0, 28, 34, 38, 49, 51, 60, 103, 124, 171, 243, 328, 475, 630, 892, 1153, 1540, 2049, 2649, 3280, 3996, 4740, 5642, 6723, 8096, 9419, 10851, 12552, 14376, 16157, 18266, 20658, 22888, 24734, 27323, 29745, 32495, 36117, 39002, 41625, 44462, 47204, 49856, 52045, 53726, 55404, 57065, 58600, 59897, 61475, 62793, 64111, 65541, 66911, 67749, 68679, 69601, 70420, 71150, 71740, 72244, 72703, 73159, 73650, 74051, 74588, 74971, 75448, 75770, 76052, 76238, 76408, 76571, 76751, 76964, 77078, 77167, 77279, 77370, 77455, 77525, 77575, 77663, 77738, 77816, 77892, 76979, 77029, 77062, 77084, 77123, 77151, 77207, 77257, 77346, 77394, 77474, 77555, 77578, 77610, 77642, 77685, 77713, 77766, 77853, 77911],
            // 待办提醒数据
            remind: [
                { num: '10', text: '待审核签约申请' },
                { num: '30', text: '待审核服务申请' },
                { num: '7', text: '待完成服务' },
                { num: '107', text: '待回复消息' },
                { num: '23', text: '待处理续约' },
            ],
            // 居民标签数据
            peopleLable: [
                { title: '高血压', num: 50 },
                { title: '冠心病', num: 60 },
                { title: '高血糖', num: 70 },
                { title: '高血脂', num: 40 },
                { title: '慢病护理', num: 35 },
                { title: '多动症', num: 80 },
            ]
        }

    },
    mounted() {
        this.queryData()
    },
    methods: {
        // 创建echarts 实例
        queryData() {
            let myChart = this.$echarts.init(document.querySelector('.echarts'));

            var option = {
                title: {
                    text: '数据概况'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['居民数量', '签约量', '服务量']//图例
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },

                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {//横坐标
                    name: "日期",
                    type: 'category',
                    boundaryGap: false,
                    data: this.xdata

                },
                yAxis: {
                    name: "数量",
                    type: 'value'
                },
                //三条折线就有三种series，可以更改type以改变是否为折线
                series: [{
                    name: '居民数量',
                    type: 'line',
                    data: this.adata,
                }, {
                    name: '签约量',
                    type: 'line',
                    data: this.bdata
                }, {
                    name: '服务量',
                    type: 'line',
                    data: this.cdata
                }],



            };
            myChart.setOption(option);
        },
        // 跳转详情页
        gotoDteail(){
            // console.log(123);
            this.$router.push('/homeDetail')
        }
    }
}

</script>

<style lang="scss" scoped>
.home {
    h2 {
        font-weight: 500;
        font-size: 22px;
    }

    // 头部数据列表
    .header {
        width: 100%;
        display: flex;
        margin-top: 20px;

        li:first-child {
            margin-left: 0;
        }

        li:nth-child(2) {
            .msg {
                .num {
                    color: rgba(40, 208, 148, 0.89803);
                }
            }
        }

        li:nth-child(3) {
            .msg {
                .num {
                    color: #FDDB78;
                }
            }
        }

        li:nth-child(4) {
            .msg {
                .num {
                    color: #FA746B;
                }
            }
        }

        li {
            flex-grow: 1;
            margin-left: 20px;
            height: 121px;
            background-color: #fff;
            border-radius: 10px;

            .msg {
                margin: 18px 0 0 110px;

                .text {
                    font-weight: 400;
                    font-size: 13px;
                    color: #999999;
                    line-height: 32px;
                }

                .num {
                    font-weight: 650;
                    font-size: 30px;
                    color: #2984F8;
                    line-height: 32px;
                    margin-top: 8px;
                }
            }
        }

        .img_box {
            position: relative;

            .bg {
                position: absolute;
                top: 23px;
                left: 5px;

            }

            .img {
                position: absolute;
                top: 50px;
                left: 44px;
            }
        }

    }

    //  echarts数据图 和 待办提醒 
    .top2 {
        width: 100%;
        display: flex;
        margin-top: 20px;

        .echarts {
            // flex-grow: 1;
            width: 847px;
            height: 451px;
            background-color: #fff;
            border-radius: 10px;
            padding: 20px;
            box-sizing: border-box;
        }

        .remind {
            // width: 257.2px;
            flex-grow: 1;
            height: 451px;
            margin-left: 20px;
            border-radius: 10px;
            background-color: #fff;
            padding: 20px;
            box-sizing: border-box;

            h3 {
                padding: 0 0 14px 0;
                border-bottom: 1px solid #eee;
            }

            li {
                display: flex;
                justify-content: space-between;
                height: 58px;
                border-bottom: 1px solid #eee;
                border-radius: 0;
                padding: 8px 0;

                .num {
                    font-weight: 500;
                    font-size: 20px;
                    line-height: 24px;
                    margin-bottom: 6px;
                }

                .text {
                    font-weight: 400;
                    font-size: 13px;
                    color: #999999;
                    line-height: 24px;
                }

                img {
                    margin-top: 22px;
                }
            }
        }
    }

    .top3 {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;

        .lable {
            width: 340px;
            height: 384px;
            padding: 20px;
            box-sizing: border-box;
            border-radius: 10px;
            background-color: #fff;

            h3 {
                margin-bottom: 22px;
            }

            .lable_item {
                height: 50px;
            }
        }

        .index {
            flex-grow: 1;
            margin-left: 20px;
            height: 384px;
            background-color: #fff;
            border-radius: 10px;
            padding: 20px;
            box-sizing: border-box;

            .index_header {
                display: flex;
                justify-content: space-between;
                margin-bottom: 22px;

                span {
                    font-size: 12px;
                    color: #999;
                    cursor: pointer;
                }
            }

            ul {
                display: flex;
                justify-content: space-between;
            }

            .index_item {
                width: 210px;
                height: 280px;
                border-radius: 10px;
                border: 1px solid #e1e1e1;
                box-shadow: -5px 5px 5px rgba(0, 0, 0, .1);
                text-align: center;

                img {
                    width: 84px;
                    height: 84px;
                    border-radius: 50%;
                    margin-top: 40px;
                }

                .item_user {
                    width: 110px;
                    display: flex;
                    justify-content: space-between;
                    margin: 8px auto;

                    span {
                        font-size: 12px;
                        color: #999;
                        line-height: 25px;
                    }

                    .user_name {
                        color: #333;
                        font-size: 18px;
                        font-weight: 600;
                    }

                    img {
                        width: 15px;
                        height: 15px;
                        margin-top: 5px;
                    }

                }

                .disease {
                    font-size: 13px;
                    color: #FA746B;
                    margin-bottom: 14px;

                    img {
                        width: 15px;
                        height: 15px;
                        margin: 0;
                        vertical-align: middle;
                    }

                }

                .btn {
                    button {
                        width: 130px;
                        height: 40px;
                        box-shadow: -3px 3px 3px rgba(0, 0, 255, .2);
                    }
                }
            }

            .index_item:hover {
                background-color: #dcebf9;
                transform: translateY(-5px);
            }
        }
    }

    // 本周签约概括
    .table {
        width: 100%;
        height: 470px;
        padding: 20px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 10px;
        margin-top: 20px;
    }
}
</style>